<template>
	<view class="container">
		<!-- 顶部标题 -->
		<view class="header">
			<text class="title">{{ grade }}{{ className }}随机点名</text>
			<text class="subtitle">已点: {{ calledStudents.length }}/{{ students.length }}</text>
		</view>

		<!-- 声音甜度调节滑块 -->
		<view class="slider-container">
			<text class="slider-label">声音甜度调节</text>
			<slider class="sweetness-slider" min="1" max="10" step="1" :value="voiceSweetness"
				@change="onSweetnessChange" activeColor="#667eea" backgroundColor="#e4e8f0" block-size="20"
				block-color="#764ba2" show-value />
			<view class="slider-tips">
				<text>御姐</text>
				<text>甜美</text>
			</view>
		</view>

		<!-- 模式选择 -->
		<view class="mode-selector">
			<button class="mode-btn" :class="{ active: activeMode === 'countdown' }" @click="switchMode('countdown')">
				倒计时点名
			</button>
			<button class="mode-btn" :class="{ active: activeMode === 'flipcard' }" @click="switchMode('flipcard')">
				翻牌点名
			</button>
		</view>

		<!-- 主内容区域 -->
		<view class="main-content">
			<!-- 倒计时模式 -->
			<view v-if="activeMode === 'countdown'" class="countdown-mode">
				<view class="time-control">
					<button class="time-btn" @click="decreaseTime">-</button>
					<view class="time-display">
						<text class="time-value">{{ countdownDuration }}</text>
						<text class="time-unit">秒</text>
					</view>
					<button class="time-btn" @click="increaseTime">+</button>
				</view>

				<view class="name-card-container">
					<view class="name-card" :class="{ selected: isRolling }">
						<view class="progress-ring">
							<svg viewBox="0 0 100 100" v-if="isRolling">
								<circle class="progress-ring-circle" cx="50" cy="50" r="45" />
								<circle class="progress-ring-circle-bg" cx="50" cy="50" r="45" />
							</svg>
							<view class="countdown-display" v-if="isRolling">
								<text class="countdown-text">{{ countdownTime }}</text>
								<text class="countdown-dot">.</text>
								<text class="countdown-decimal">{{ countdownDecimal }}</text>
								<text class="countdown-unit">秒</text>
							</view>
						</view>
						<text class="name-display" :class="{ rolling: isRolling }">{{ displayName || '准备开始' }}</text>
						<view class="countdown-progress" v-if="isRolling">
							<view class="progress-bar" :style="{ width: progress + '%' }"></view>
						</view>
					</view>
				</view>

				<view class="action-buttons">
					<button class="btn start-btn" @click="startRollCall" :disabled="isRolling || students.length === 0">
						{{ isRolling ? '点名中...' : '开始点名' }}
					</button>
					<button class="btn stop-btn" @click="stopRollCall" v-if="isRolling">
						停止
					</button>
				</view>

				<!-- 手机端倒计时模式的学生列表 -->
				<view class="mobile-student-list" v-if="isMobile">
					<view class="list-title">已点名单</view>
					<scroll-view class="list-content" scroll-y>
						<view class="called-item" v-for="(student, index) in calledStudents" :key="index"
							:class="{ latest: index === 0 }">
							<text class="item-number">{{ index + 1 }}</text>
							<text class="item-name">{{ student }}</text>
							<view class="item-badge" v-if="index === 0">最新</view>
						</view>
						<view class="empty-tip" v-if="calledStudents.length === 0">
							<text>暂无已点名学生</text>
						</view>
					</scroll-view>
				</view>
			</view>

			<!-- 翻牌模式 -->
			<view v-if="activeMode === 'flipcard'" class="flipcard-mode">
				<!-- 手机端翻牌模式的已点名单 -->
				<view class="mobile-called-list" v-if="isMobile">
					<scroll-view class="list-content" scroll-x>
						<view class="called-item" v-for="(student, index) in calledStudents" :key="index"
							:class="{ latest: index === 0 }">
							<text class="item-name">{{ student }}</text>
						</view>
					</scroll-view>
				</view>

				<view class="flipcard-grid">
					<view v-for="(item, index) in shuffledList" :key="index" class="flipcard-container">
						<view class="flipcard" :class="{ 
							flipped: item.flipped, 
							latest: latestFlippedIndex === index 
						}" @click="flipCard(index)">
							<view class="front">
								<text>{{ index + 1 }}</text>
							</view>
							<view class="back">
								<text>{{ item.name }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="flipcard-controls">
					<button class="btn random-btn" @click="randomFlip" :disabled="students.length === 0">
						随机翻牌
					</button>
					<button class="btn reset-btn" @click="resetFlipCards">
						重置卡片
					</button>
				</view>
			</view>

			<!-- 电脑端学生列表 -->
			<view class="desktop-student-list" v-if="!isMobile">
				<view class="list-header">
					<text class="list-title">已点名单</text>
					<text class="list-count">{{ calledStudents.length }}/{{ students.length }}</text>
				</view>
				<scroll-view class="list-content" scroll-y>
					<view class="called-item" v-for="(student, index) in calledStudents" :key="index"
						:class="{ latest: index === 0 }">
						<text class="item-number">{{ index + 1 }}</text>
						<text class="item-name">{{ student }}</text>
						<view class="item-badge" v-if="index === 0">最新</view>
					</view>
					<view class="empty-tip" v-if="calledStudents.length === 0">
						<text>暂无已点名学生</text>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
	import studentsData from '../../students';
	import {
		globalVariable
	} from '../../configMy.js';

	export default {
		data() {
			return {
				grade: '',
				className: '',
				students: [],
				studentsData: [],
				activeMode: 'countdown',
				isMobile: false,
				isIOS: false,
				countdownDuration: 1,
				countdownTime: 1,
				countdownDecimal: 0,
				displayName: '',
				flag: false,
				shuffledList: [],
				latestFlippedIndex: -1,
				currentStudent: '',
				calledStudents: [],
				isRolling: false,
				rollInterval: null,
				nameInterval: null,
				progress: 0,
				voiceSweetness: 5,
				audioText: '请选择学生',
				currentAudio: null,
				audioQueue: [],
				isPlaying: false,
				audioRetryCount: 0,
				maxRetryCount: 3
			}
		},
		async created() {
			try {
				this.studentsData = studentsData.studentsData;
				this.checkDeviceType();
				this.loadSweetnessSetting();
				this.initAudioContext();
				this.playSuccessSound("下面开始点名");
			} catch (error) {
				console.error('加载学生数据失败:', error);
			}
		},
		onLoad(options) {
			this.grade = options.grade || '';
			this.className = options.class || '';
			this.loadClassStudents();
		},
		methods: {
			// 音频相关方法
			initAudioContext() {
				try {
					const AudioContext = window.AudioContext || window.webkitAudioContext;
					if (AudioContext) {
						this.audioContext = new AudioContext();
						console.log('音频上下文初始化成功');
					}
				} catch (e) {
					console.error('初始化音频上下文失败:', e);
				}
			},

			async loadSweetnessSetting() {
				try {
					const savedSweetness = await uni.getStorageSync('voiceSweetness');
					if (savedSweetness) {
						this.voiceSweetness = parseInt(savedSweetness);
					}
				} catch (e) {
					console.log('加载甜度设置失败', e);
				}
			},

			async saveSweetnessSetting() {
				try {
					await uni.setStorageSync('voiceSweetness', this.voiceSweetness.toString());
				} catch (e) {
					console.log('保存甜度设置失败', e);
				}
			},

			onSweetnessChange(e) {
				this.voiceSweetness = e.detail.value;
				this.saveSweetnessSetting();
			},

			playSuccessSound(text) {
				if (this.isIOS) {
					this.prepareAudioForIOS(text);
					return;
				}
				this.playAudio(text);
			},

			prepareAudioForIOS(text) {
				this.playAudio(text);
			},

			playAudio(text) {
				if (this.currentAudio) {
					this.currentAudio.destroy();
					this.currentAudio = null;
				}

				const audio = uni.createInnerAudioContext();
				this.currentAudio = audio;

				if (this.isIOS) {
					audio.obeyMuteSwitch = false;
					audio.autoplay = true;
				}

				const audioUrl = this.getCompatibleAudioUrl(text);
				audio.src = audioUrl;

				audio.onPlay(() => {
					console.log('开始播放:', text);
				});

				audio.onError((err) => {
					console.error('音频播放错误:', err);
					this.fallbackAudioPlay(text);
				});

				audio.onEnded(() => {
					console.log('播放完成');
					this.currentAudio = null;
				});

				const playPromise = audio.play();
				if (playPromise !== undefined) {
					playPromise.catch(err => {
						console.error('播放失败:', err);
						this.fallbackAudioPlay(text);
					});
				}
			},

			getCompatibleAudioUrl(text) {
				let audioUrl = `${globalVariable}/getSounds?text=${encodeURIComponent(text)}&pit=${this.voiceSweetness}`;
				if (this.isIOS) {
					if (audioUrl.indexOf('.mp3') === -1 && audioUrl.indexOf('.wav') === -1) {
						audioUrl += '&format=mp3';
					}
				}
				return audioUrl;
			},

			fallbackAudioPlay(text) {
				// return;
				try {
					const AudioContext = window.AudioContext || window.webkitAudioContext;
					if (AudioContext) {
						const audioContext = new AudioContext();
						const source = audioContext.createBufferSource();

						fetch(this.getCompatibleAudioUrl(text))
							.then(response => response.arrayBuffer())
							.then(buffer => audioContext.decodeAudioData(buffer))
							.then(decodedData => {
								source.buffer = decodedData;
								source.connect(audioContext.destination);
								source.start(0);
								return;
							})
							.catch(e => {
								console.error('Web Audio API播放失败:', e);
								throw e;
							});
					}
				} catch (e) {
					console.error('Web Audio API初始化失败:', e);
				}

				if (window.speechSynthesis) {
					try {
						return;
						const utterance = new SpeechSynthesisUtterance(text);
						window.speechSynthesis.speak(utterance);
						return;
					} catch (e) {
						console.error('TTS播放失败:', e);
					}
				}

				uni.showToast({
					title: '音频播放失败',
					icon: 'none'
				});
			},

			// 设备检测
			checkDeviceType() {
				const systemInfo = uni.getSystemInfoSync();
				this.isMobile = systemInfo.windowWidth < 768;
				this.isIOS = systemInfo.platform === 'ios';
				uni.onWindowResize((res) => {
					this.isMobile = res.size.windowWidth < 768;
				});
			},

			// 班级学生管理
			loadClassStudents2() {
				const classData = this.studentsData.find(item =>
					item.grade === this.grade && item.class === this.className
				);
				this.students = [...classData.students];
			},

			loadClassStudents() {
				this.loadClassStudents2();
				this.resetFlipCards();
			},

			// 模式切换
			switchMode(mode) {
				this.activeMode = mode;
				this.resetRollCall();
				this.playSuccessSound(`已切换到${mode === 'countdown' ? '倒计时点名' : '翻牌点名'}模式`);
			},

			// 倒计时控制
			increaseTime() {
				if (this.countdownDuration < 5) {
					this.countdownDuration++;
					this.playSuccessSound(`倒计时时间设置为${this.countdownDuration}秒`);
				}
			},

			decreaseTime() {
				if (this.countdownDuration > 1) {
					this.countdownDuration--;
					this.playSuccessSound(`倒计时时间设置为${this.countdownDuration}秒`);
				}
			},

			// 点名功能
			startRollCall() {
				if (this.students.length === 0) return;
				if (this.calledStudents.length >= this.students.length) {
					uni.showToast({
						title: '所有学生已点名完毕',
						icon: 'none'
					});
					this.playSuccessSound("所有学生已点名完毕");
					return;
				}

				this.isRolling = true;
				this.countdownTime = this.countdownDuration;
				this.countdownDecimal = 9;
				this.progress = 0;
				this.playSuccessSound("开始随机点名");

				const totalDuration = this.countdownDuration * 1000;
				let startTime = performance.now();
				let elapsedTime = 0;

				const update = (currentTime) => {
					if (!this.isRolling) return;

					elapsedTime = currentTime - startTime;
					const remainingTime = totalDuration - elapsedTime;

					if (remainingTime > 0) {
						this.countdownTime = Math.floor(remainingTime / 1000);
						this.countdownDecimal = Math.floor((remainingTime % 1000) / 100);
						this.progress = (elapsedTime / totalDuration) * 100;

						if (!this.nameInterval) {
							this.nameInterval = setInterval(() => {
								const availableStudents = this.students.filter(student =>
									!this.calledStudents.includes(student)
								);
								if (availableStudents.length > 0) {
									const randomIndex = Math.floor(Math.random() * availableStudents.length);
									this.displayName = availableStudents[randomIndex];
								}
							}, 100);
						}

						requestAnimationFrame(update);
					} else {
						this.stopRollCall();
					}
				};

				requestAnimationFrame(update);
			},

			stopRollCall() {
				if (this.rollInterval) {
					clearInterval(this.rollInterval);
					this.rollInterval = null;
				}
				if (this.nameInterval) {
					clearInterval(this.nameInterval);
					this.nameInterval = null;
				}
				this.isRolling = false;
				this.countdownDecimal = 0;

				if (this.displayName && !this.calledStudents.includes(this.displayName)) {
					this.currentStudent = this.displayName;
					this.calledStudents.unshift(this.displayName);
					this.playSuccessSound(`恭喜${this.displayName}同学被选中`);
				}
			},

			resetRollCall() {
				this.displayName = '';
				this.currentStudent = '';
			},

			// 翻牌功能
			flipCard(index) {
				this.$set(this.shuffledList[index], 'flipped', !this.shuffledList[index].flipped);
				if (this.shuffledList[index].flipped && !this.calledStudents.includes(this.shuffledList[index].name)) {
					this.currentStudent = this.shuffledList[index].name;
					this.calledStudents.unshift(this.shuffledList[index].name);
					this.latestFlippedIndex = index;
					this.playSuccessSound(`恭喜${this.shuffledList[index].name}同学被选中`);

					setTimeout(() => {
						this.latestFlippedIndex = -1;
					}, 3000);
				}
			},

			randomFlip() {
				const unflippedCards = this.shuffledList
					.map((item, index) => ({
						index,
						flipped: item.flipped
					}))
					.filter(item => !item.flipped);

				if (unflippedCards.length === 0) return;

				const randomCard = unflippedCards[Math.floor(Math.random() * unflippedCards.length)];
				this.flipCard(randomCard.index);
			},

			resetFlipCards() {
				const shuffledNames = [...this.students];
				for (let i = shuffledNames.length - 1; i > 0; i--) {
					const j = Math.floor(Math.random() * (i + 1));
					[shuffledNames[i], shuffledNames[j]] = [shuffledNames[j], shuffledNames[i]];
				}

				this.shuffledList = shuffledNames.map(name => ({
					name,
					flipped: false
				}));
				this.latestFlippedIndex = -1;
				if (this.flag) {
					this.playSuccessSound("已重置所有卡片");
				}
				this.flag = true;
			}
		},
		onUnload() {
			if (this.currentAudio) {
				this.currentAudio.destroy();
				this.currentAudio = null;
			}
			if (this.rollInterval) clearInterval(this.rollInterval);
			if (this.nameInterval) clearInterval(this.nameInterval);
		}
	}
</script>

<style scoped>
	/* 基础样式 */
	:root {
		--primary-color: #409eff;
		--success-color: #67c23a;
		--warning-color: #e6a23c;
		--danger-color: #f56c6c;
		--info-color: #909399;
		--white: #ffffff;
		--light-bg: #f5f7fa;
		--dark-text: #303133;
		--regular-text: #606266;
		--border-color: #dcdfe6;
	}

	.container {
		padding: 20px;
		background-color: var(--light-bg);

		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* 标题样式 */
	.header {
		margin-bottom: 20px;
		text-align: center;
		animation: fadeInDown 0.5s ease-out;
	}

	.title {
		font-size: 28px;
		font-weight: bold;
		color: var(--primary-color);
		text-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
		display: block;
		margin-bottom: 5px;
	}

	.subtitle {
		font-size: 16px;
		color: var(--regular-text);
		background-color: rgba(64, 158, 255, 0.1);
		padding: 4px 12px;
		border-radius: 12px;
	}

	/* 声音甜度调节滑块 */
	.slider-container {
		margin: 15px 0;
		padding: 0 20px;
	}

	.slider-label {
		display: block;
		font-size: 14px;
		color: var(--regular-text);
		margin-bottom: 8px;
		text-align: center;
	}

	.sweetness-slider {
		width: 100%;
		margin-bottom: 5px;
	}

	.slider-tips {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		color: var(--info-color);
		padding: 0 10px;
	}

	/* 模式选择 */
	.mode-selector {
		display: flex;
		justify-content: center;
		margin-bottom: 25px;
		gap: 20px;
		animation: fadeIn 0.6s ease-out;
	}

	.mode-btn {
		padding: 12px 25px;
		border-radius: 25px;
		background-color: var(--white);
		border: 1px solid var(--border-color);
		color: var(--regular-text);
		font-size: 16px;
		font-weight: 500;
		transition: all 0.3s ease;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.mode-btn.active {
		background: linear-gradient(135deg, var(--primary-color), #66b1ff);
		color: var(--white);
		border-color: var(--primary-color);
		box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
		transform: translateY(-2px);
	}

	/* 主内容区域 */
	.main-content {
		display: flex;
		flex: 1;
		gap: 20px;
		position: relative;
	}

	/* 倒计时模式 */
	.countdown-mode {
		flex: 1;
		display: flex;
		flex-direction: column;
		animation: fadeIn 0.5s ease-out;
	}

	.time-control {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30px;
		gap: 25px;
	}

	.time-btn {
		width: 45px;
		height: 45px;
		border-radius: 50%;
		background: linear-gradient(135deg, var(--primary-color), #66b1ff);
		color: var(--white);
		font-size: 22px;
		font-weight: bold;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
		transition: all 0.2s ease;
	}

	.time-btn:active {
		transform: scale(0.95);
	}

	.time-display {
		display: flex;
		align-items: baseline;
	}

	.time-value {
		font-size: 32px;
		font-weight: bold;
		color: var(--primary-color);
		margin-right: 5px;
		text-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
	}

	.time-unit {
		font-size: 18px;
		color: var(--regular-text);
	}

	.name-card-container {
		margin: 30px 0;
		display: flex;
		justify-content: center;
		perspective: 1000px;
	}

	.name-card {
		width: 80%;
		min-height: 250px;
		background: var(--white);
		border-radius: 16px;
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		transition: all 0.3s ease;
		transform-style: preserve-3d;
		padding: 20px;
	}

	.name-card.selected {
		border: 3px solid var(--primary-color);
		box-shadow: 0 15px 35px rgba(64, 158, 255, 0.3);
		animation: pulse 1.5s infinite;
	}

	.progress-ring {
		position: absolute;
		top: 15px;
		right: 15px;
		width: 60px;
		height: 60px;
	}

	.progress-ring circle {
		fill: none;
		stroke-width: 5;
		stroke-linecap: round;
		transform: rotate(-90deg);
		transform-origin: 50% 50%;
	}

	.progress-ring-circle-bg {
		stroke: #eee;
	}

	.progress-ring-circle {
		stroke: var(--danger-color);
		stroke-dasharray: 283;
		stroke-dashoffset: calc(283 - (283 * var(--progress)) / 100);
		transition: stroke-dashoffset 0.1s linear;
	}

	.countdown-display {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: baseline;
	}

	.countdown-text {
		font-size: 22px;
		font-weight: bold;
		color: var(--danger-color);
	}

	.countdown-dot {
		font-size: 22px;
		font-weight: bold;
		color: var(--danger-color);
	}

	.countdown-decimal {
		font-size: 18px;
		font-weight: bold;
		color: var(--danger-color);
		margin-right: 2px;
	}

	.countdown-unit {
		font-size: 14px;
		color: var(--danger-color);
	}

	.name-display {
		font-size: 36px;
		font-weight: bold;
		color: var(--primary-color);
		transition: all 0.3s ease;
		padding: 0 20px;
		text-align: center;
		margin: 20px 0;
	}

	.name-display.rolling {
		animation: bounce 0.5s infinite alternate;
	}

	.countdown-progress {
		width: 80%;
		height: 8px;
		background-color: #eee;
		border-radius: 4px;
		overflow: hidden;
		margin-top: 20px;
	}

	.progress-bar {
		height: 100%;
		background: linear-gradient(90deg, var(--primary-color), #66b1ff);
		transition: width 0.1s linear;
	}

	/* 翻牌模式 */
	.flipcard-mode {
		flex: 1;
		display: flex;
		flex-direction: column;
		animation: fadeIn 0.5s ease-out;
	}

	/* 手机端已点名单 */
	.mobile-called-list {
		background-color: var(--white);
		border-radius: 12px;
		padding: 12px;
		margin-bottom: 15px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	.mobile-called-list .list-content {
		display: flex;
		white-space: nowrap;
	}

	.mobile-called-list .called-item {
		display: inline-flex;
		align-items: center;
		padding: 8px 12px;
		margin-right: 8px;
		background-color: rgba(64, 158, 255, 0.1);
		border-radius: 16px;
		font-size: 14px;
		color: var(--primary-color);
		animation: fadeIn 0.3s ease-out;
	}

	.mobile-called-list .called-item.latest {
		background-color: var(--primary-color);
		color: var(--white);
		font-weight: bold;
		box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
	}

	/* 手机端倒计时模式学生列表 */
	.mobile-student-list {
		background-color: var(--white);
		border-radius: 16px;
		padding: 15px;
		margin-top: 20px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	.mobile-student-list .list-title {
		font-size: 16px;
		font-weight: bold;
		color: var(--dark-text);
		margin-bottom: 10px;
		display: block;
	}

	.mobile-student-list .list-content {
		max-height: 200px;
	}

	.mobile-student-list .called-item {
		padding: 10px 0;
		border-bottom: 1px solid var(--border-color);
		display: flex;
		align-items: center;
	}

	.mobile-student-list .called-item:last-child {
		border-bottom: none;
	}

	.mobile-student-list .called-item.latest {
		background-color: rgba(64, 158, 255, 0.05);
		border-left: 4px solid var(--primary-color);
		padding-left: 10px;
	}

	.mobile-student-list .item-number {
		width: 25px;
		font-size: 14px;
		color: var(--info-color);
		margin-right: 10px;
	}

	.mobile-student-list .item-name {
		flex: 1;
		font-size: 16px;
		color: var(--dark-text);
	}

	.mobile-student-list .item-badge {
		font-size: 12px;
		color: var(--white);
		background-color: var(--primary-color);
		padding: 2px 8px;
		border-radius: 10px;
		margin-left: 10px;
	}

	.mobile-student-list .empty-tip {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100px;
		color: var(--info-color);
		font-size: 14px;
	}

	.flipcard-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
		gap: 12px;
		margin-bottom: 20px;
	}

	.flipcard-container {
		perspective: 1000px;
		height: 120px;
	}

	.flipcard {
		width: 100%;
		height: 100%;
		position: relative;
		transform-style: preserve-3d;
		transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
		cursor: pointer;
	}

	.flipcard.flipped {
		transform: rotateY(180deg);
	}

	.flipcard.latest {
		box-shadow: 0 0 0 3px var(--primary-color);
	}

	.flipcard .front,
	.flipcard .back {
		position: absolute;
		width: 100%;
		height: 100%;
		backface-visibility: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 12px;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
	}

	.flipcard .front {
		background: linear-gradient(135deg, var(--primary-color), #66b1ff);
		color: var(--white);
		font-size: 24px;
		font-weight: bold;
	}

	.flipcard .back {
		background: linear-gradient(135deg, var(--success-color), #95d475);
		color: var(--white);
		font-size: 16px;
		transform: rotateY(180deg);
		text-align: center;
		padding: 5px;
		word-break: break-all;
	}

	/* 电脑端学生列表 */
	.desktop-student-list {
		width: 280px;
		background-color: var(--white);
		border-radius: 16px;
		padding: 20px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
		display: flex;
		flex-direction: column;
		animation: fadeInRight 0.5s ease-out;
	}

	.desktop-student-list .list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 1px solid var(--border-color);
	}

	.desktop-student-list .list-title {
		font-size: 18px;
		font-weight: bold;
		color: var(--dark-text);
	}

	.desktop-student-list .list-count {
		font-size: 14px;
		color: var(--primary-color);
		background-color: rgba(64, 158, 255, 0.1);
		padding: 4px 10px;
		border-radius: 12px;
	}

	.desktop-student-list .list-content {
		flex: 1;
		max-height: calc(100vh - 300px);
	}

	.desktop-student-list .called-item {
		padding: 12px 0;
		border-bottom: 1px solid var(--border-color);
		display: flex;
		align-items: center;
		transition: all 0.3s ease;
		animation: fadeIn 0.5s ease-out;
	}

	.desktop-student-list .called-item:last-child {
		border-bottom: none;
	}

	.desktop-student-list .called-item.latest {
		background-color: rgba(64, 158, 255, 0.05);
		border-left: 4px solid var(--primary-color);
		padding-left: 10px;
	}

	.desktop-student-list .item-number {
		width: 25px;
		font-size: 14px;
		color: var(--info-color);
		margin-right: 10px;
	}

	.desktop-student-list .item-name {
		flex: 1;
		font-size: 16px;
		color: var(--dark-text);
	}

	.desktop-student-list .item-badge {
		font-size: 12px;
		color: var(--white);
		background-color: var(--primary-color);
		padding: 2px 8px;
		border-radius: 10px;
		margin-left: 10px;
	}

	.desktop-student-list .empty-tip {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100px;
		color: var(--info-color);
		font-size: 14px;
	}

	/* 按钮样式 */
	.action-buttons,
	.flipcard-controls {
		display: flex;
		justify-content: center;
		gap: 20px;
		margin-bottom: 20px;
		flex-wrap: wrap;
	}

	.btn {
		min-width: 140px;
		height: 50px;
		border-radius: 25px;
		font-size: 16px;
		font-weight: 500;
		border: none;
		color: var(--white);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	.start-btn {
		background: linear-gradient(135deg, var(--primary-color), #66b1ff);
	}

	.stop-btn {
		background: linear-gradient(135deg, var(--danger-color), #f78989);
	}

	.random-btn {
		background: linear-gradient(135deg, var(--warning-color), #eebe77);
	}

	.reset-btn {
		background: linear-gradient(135deg, var(--success-color), #95d475);
	}

	.btn:active {
		transform: translateY(2px);
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	}

	.btn[disabled] {
		background: linear-gradient(135deg, #c0c4cc, #d3d4d6);
		opacity: 0.7;
		transform: none;
		box-shadow: none;
	}

	/* 动画效果 */
	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes fadeInDown {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes fadeInRight {
		from {
			opacity: 0;
			transform: translateX(20px);
		}

		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.05);
		}

		100% {
			transform: scale(1);
		}
	}

	@keyframes bounce {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(-10px);
		}
	}

	/* 响应式调整 */
	@media (max-width: 768px) {
		.main-content {
			flex-direction: column;
		}

		.desktop-student-list {
			display: none;
		}

		.flipcard-grid {
			grid-template-columns: repeat(3, 1fr);
		}

		.name-card {
			width: 100%;
			min-height: 200px;
		}

		.name-display {
			font-size: 28px;
		}

		.btn {
			min-width: 120px;
			height: 45px;
			font-size: 14px;
		}
	}

	@media (min-width: 769px) {

		.mobile-called-list,
		.mobile-student-list {
			display: none;
		}

		.countdown-mode {
			width: calc(100% - 300px);
		}

		.flipcard-mode {
			width: calc(100% - 300px);
		}
	}
</style>